<template>
  <div class="h-full flex flex-col">
    <!-- 筛选条件 -->
    <div class="model-header pl-[10px] pr-[10px]">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-input v-model="queryData.name" placeholder="请输入任务名称" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-select v-model="queryData.model" placeholder="请选择模型">
            <el-option
              v-for="item in options.modelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-date-picker
            style="width: 100%"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-select v-model="queryData.model" placeholder="请选择标注类型">
            <el-option
              v-for="item in options.statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-select v-model="queryData.status" placeholder="请选择任务状态">
            <el-option
              v-for="item in options.typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-select
            v-model="queryData.labeledManagerName"
            placeholder="请选择标注经理"
          >
            <el-option
              v-for="item in options.modelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-select
            v-model="queryData.reviewManagerName"
            placeholder="请选择标注审核员"
          >
            <el-option
              v-for="item in options.modelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <el-select v-model="queryData.taskType" placeholder="请选择任务类型">
            <el-option
              v-for="item in options.modelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6" class="mb-[15px]">
          <div class="flex">
            <div>
              <el-button class="w-[80px]" color="#626aef" type="primary">
                查询
              </el-button>
            </div>
            <div class="ml-[15px]">
              <el-button class="w-[90px]" color="#626aef" type="primary">
                新建任务
              </el-button>
            </div>
            <div class="ml-[15px]">
              <el-button class="w-[80px]" color="#626aef" type="primary">
                导出
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <div class="sheet flex-1 overflow-auto">
      <!-- <div>用户信息: {{ userInfos }}</div> -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="任务名称" />
        <el-table-column
          prop="labeledType"
          label="标注类型"
          width="80"
          align="center"
        />
        <el-table-column
          prop="labeledNum"
          label="数据量"
          width="80"
          align="center"
        />
        <el-table-column
          prop="labeledManagerName"
          label="标注经理"
          width="120"
          align="center"
        />
        <el-table-column
          prop="reviewManagerName"
          label="标注审核员"
          width="120"
          align="center"
        />
        <el-table-column
          prop="type"
          label="任务类型"
          width="80"
          align="center"
        />
        <el-table-column
          prop="samplingRatio"
          label="抽检比例"
          width="80"
          align="center"
        />
        <el-table-column
          prop="status"
          label="任务状态"
          width="80"
          align="center"
        />
        <el-table-column
          prop="labeledManagerName"
          label="创建人"
          width="120"
          align="center"
        />
        <el-table-column prop="ctime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center" width="260">
          <template #default="scope">
            <el-button
              type="primary"
              @click="skipDatabase(scope.row.name)"
              text
            >
              <SvgIcon
                class="mr-[2px]"
                name="examine"
                size="18px"
                color="#409EFF"
              />
              任务详情
            </el-button>
            <el-button type="primary" text>
              <Edit class="w-[18px] h-[18px] mr-[2px]" />
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-center py-[15px] border-t">
      <el-pagination
        v-model:current-page="queryData.pageNum"
        v-model:page-size="queryData.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="tableData.length"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineAsyncComponent, reactive } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useUserInfo } from '@/store/user';
  import { useRouter } from 'vue-router';
  import { OptionType } from '@/types/app';

  const SvgIcon = defineAsyncComponent(
    () => import('@/components/SvgIcon.vue'),
  );
  const Draggable = defineAsyncComponent(
    () => import('@/components/Draggable.vue'),
  );

  const router = useRouter();
  const userStores = useUserInfo();
  const { userInfos } = storeToRefs(userStores);

  const queryData = reactive({
    name: '', //数据集名称
    model: '', //模型
    type: '', //标注类型
    startTime: '', //开始时间
    endTime: '', //结束时间
    status: '', //任务状态
    labeledManagerName: '', //标注经理
    reviewManagerName: '', //标注审核员
    taskType: '', //任务类型
    pageNum: 1, //页码
    pageSize: 10, //页数
  });

  const options = reactive({
    modelOptions: [
      {
        value: '1',
        label: '六豆豆',
      },
      {
        value: '2',
        label: '王鹏鹏',
      },
      {
        value: '3',
        label: '敏感词',
      },
    ],
    typeOptions: [
      {
        value: '1',
        label: '人工标注',
      },
      {
        value: '2',
        label: '标注复核',
      },
    ],
    statusOptions: [
      {
        value: '1',
        label: '待分配',
      },
      {
        value: '2',
        label: '进程中',
      },
      {
        value: '2',
        label: '已完成',
      },
    ],
    taggerOptions: [] as OptionType[],
  });

  const tableData = [
    {
      colIdStr: null,
      colIds: null,
      corpusNums: null,
      ctime: '2025-02-26 11:31:18',
      dataMark: null,
      id: 150,
      labeledManagerId: '36',
      labeledManagerName: '黄雪燕',
      labeledNum: 50,
      labeledType: 2,
      llmId: null,
      name: '语义质检-包类模型-粤语复核5',
      points: null,
      reviewManagerId: null,
      reviewManagerName: '系统',
      samplingRatio: 0,
      status: 1,
      type: 1,
      userId: '36',
      username: '黄雪燕',
    },
    {
      colIdStr: null,
      colIds: null,
      corpusNums: null,
      ctime: '2025-02-20 15:39:04',
      dataMark: null,
      id: 149,
      labeledManagerId: '36',
      labeledManagerName: '黄雪燕',
      labeledNum: 50,
      labeledType: 2,
      llmId: null,
      name: '语义质检-包类模型-粤语复核4',
      points: null,
      reviewManagerId: null,
      reviewManagerName: '系统',
      samplingRatio: 0,
      status: 1,
      type: 1,
      userId: '36',
      username: '黄雪燕',
    },
    {
      colIdStr: null,
      colIds: null,
      corpusNums: null,
      ctime: '2025-02-14 17:19:57',
      dataMark: null,
      id: 148,
      labeledManagerId: '36',
      labeledManagerName: '黄雪燕',
      labeledNum: 71,
      labeledType: 2,
      llmId: null,
      name: '语义质检-包类模型-粤语3',
      points: null,
      reviewManagerId: null,
      reviewManagerName: '系统',
      samplingRatio: 0,
      status: 1,
      type: 1,
      userId: '36',
      username: '黄雪燕',
    },
    {
      colIdStr: null,
      colIds: null,
      corpusNums: null,
      ctime: '2025-02-14 10:09:11',
      dataMark: null,
      id: 147,
      labeledManagerId: '36',
      labeledManagerName: '黄雪燕',
      labeledNum: 20,
      labeledType: 2,
      llmId: null,
      name: '语义质检-包类模型-粤语2-复核',
      points: null,
      reviewManagerId: null,
      reviewManagerName: '系统',
      samplingRatio: 0,
      status: 2,
      type: 1,
      userId: '36',
      username: '黄雪燕',
    },
    {
      colIdStr: null,
      colIds: null,
      corpusNums: null,
      ctime: '2025-02-14 09:58:34',
      dataMark: null,
      id: 146,
      labeledManagerId: '62',
      labeledManagerName: '邓吉森',
      labeledNum: 5,
      labeledType: 1,
      llmId: null,
      name: '测试-十一1',
      points: null,
      reviewManagerId: '62',
      reviewManagerName: '邓吉森',
      samplingRatio: 1,
      status: 1,
      type: 1,
      userId: '62',
      username: '邓吉森',
    },
    {
      colIdStr: null,
      colIds: null,
      corpusNums: null,
      ctime: '2025-02-14 09:52:20',
      dataMark: null,
      id: 145,
      labeledManagerId: '62',
      labeledManagerName: '邓吉森',
      labeledNum: 1,
      labeledType: 1,
      llmId: null,
      name: '测试4-十一',
      points: null,
      reviewManagerId: '62',
      reviewManagerName: '邓吉森',
      samplingRatio: 1,
      status: 2,
      type: 1,
      userId: '62',
      username: '邓吉森',
    },
    {
      colIdStr: null,
      colIds: null,
      corpusNums: null,
      ctime: '2025-02-14 09:25:57',
      dataMark: null,
      id: 144,
      labeledManagerId: '63',
      labeledManagerName: '金涛',
      labeledNum: 25,
      labeledType: 1,
      llmId: null,
      name: '测试2-ytuhtry',
      points: null,
      reviewManagerId: '62',
      reviewManagerName: '邓吉森',
      samplingRatio: 10,
      status: 1,
      type: 1,
      userId: '62',
      username: '邓吉森',
    },
    {
      colIdStr: null,
      colIds: null,
      corpusNums: null,
      ctime: '2025-02-14 09:23:21',
      dataMark: null,
      id: 143,
      labeledManagerId: '63',
      labeledManagerName: '金涛',
      labeledNum: 1,
      labeledType: 1,
      llmId: null,
      name: '测试4-asdfasdfasdd',
      points: null,
      reviewManagerId: '62',
      reviewManagerName: '邓吉森',
      samplingRatio: 10,
      status: 1,
      type: 1,
      userId: '62',
      username: '邓吉森',
    },
    {
      colIdStr: null,
      colIds: null,
      corpusNums: null,
      ctime: '2025-02-13 14:50:46',
      dataMark: null,
      id: 142,
      labeledManagerId: '36',
      labeledManagerName: '黄雪燕',
      labeledNum: 41,
      labeledType: 2,
      llmId: null,
      name: '语义质检-包类模型-粤语复核1',
      points: null,
      reviewManagerId: null,
      reviewManagerName: '系统',
      samplingRatio: 0,
      status: 1,
      type: 1,
      userId: '36',
      username: '黄雪燕',
    },
    {
      colIdStr: null,
      colIds: null,
      corpusNums: null,
      ctime: '2025-02-13 08:53:19',
      dataMark: null,
      id: 141,
      labeledManagerId: '7',
      labeledManagerName: '陈松青',
      labeledNum: 191,
      labeledType: 2,
      llmId: null,
      name: '语义质检-包类模型-测试11',
      points: null,
      reviewManagerId: null,
      reviewManagerName: '系统',
      samplingRatio: 0,
      status: 1,
      type: 1,
      userId: '7',
      username: '陈松青',
    },
  ];

  const handleSizeChange = (val: number) => {
    queryData.pageSize = val;
  };

  const handleCurrentChange = (val: number) => {
    queryData.pageNum = val;
  };

  const skipDatabase = (name: string) => {
    router.push({
      path: '/mark/task/detail',
      query: { taskName: name },
    });
  };
</script>

<style scoped>
  .el-button {
    padding: 5px !important;
  }
</style>
